<!-- 横向环境柱状图！-->
<template>
  <div class="com-container">
    <div class="com-chart" ref="huangjing_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstance: null,
      allData: null, //服务器返回的数据
      timeid: null, //定时器id
    };
  },

  mounted() {
    this.initEchart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    //在页面加载完成的时候，调用屏幕适配方法
    this.screenAdapter();
    this.startInterval();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
    clearInterval(this.timeid);
  },
  methods: {
    //初始化echartInstance实例对象
    initEchart() {
      this.chartInstance = this.$echarts.init(
        this.$refs.huangjing_ref,
        "chalk"
      );
      //对图表初始化配置
      const initOption = {
        title: {
          text: "▎ 环境信息",
          left: 20,
          top: 0,
        },
        backgroundColor: "", //设置无背景色
        grid: {
          top: "15%",
          left: "3%",
          right: "10%",
          bottom: "0%",
          containLabel: true, //距离包含坐标轴文字
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          axisLabel: {
            color: "#fff",
          },
          axisTick: {
            show: false, //不显示坐标轴刻度线
          },
          axisLine: {
            show: false, //不显示坐标轴线
          },
        },
        series: [
          {
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "right",
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              //颜色渐变的方向
              //指明不同百分比之下颜色的值
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#5052ee",
                },
                {
                  offset: 1,
                  color: "#ab6ee5",
                },
              ]),
            },
          },
        ],
      };
      this.chartInstance.setOption(initOption);
      //对图表进行鼠标事件的监听
      this.chartInstance.on("mouseover", () => clearInterval(this.timeid));
      this.chartInstance.on("mouseout", () => {
        this.startInterval();
      });
    },
    //获取服务器的数据
    async getData() {
      const res = await this.$http.get("/ai/huanjing");
      this.allData = res.data;
      // console.log(this.allData);
      this.updateChart();
    },
    //更新图表
    updateChart() {
      const dataOption = {
        yAxis: {
          data: ["O2", "CO2", "O3", "CO", "SF6", "DB"],
        },
        series: [
          {
            data: [
              {
                value: this.allData["o2"],
              },
              {
                value: this.allData["co2"],
              },
              {
                value: this.allData["o3"],
              },
              {
                value: this.allData["co"],
              },
              {
                value: this.allData["sf6"],
              },
              {
                value: this.allData["db"],
              },
            ],
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    //屏幕适配
    screenAdapter() {
      // console.log(this.$refs.huangjing_ref.offsetWidth);
      const titleFontSize = (this.$refs.huangjing_ref.offsetWidth / 100) * 3.6;
      //和分辨率大小的配置项目
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize * 1.5,
          },
        },
        series: [
          {
            barWidth: titleFontSize,
            itemStyle: {
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0], //柱状图圆角
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      //手动调用图表的resize对象 才能产生效果
      this.chartInstance.resize();
    },
    //定时器
    startInterval() {
      this.timeid = setInterval(() => {
        this.getData();
      }, 4000);
    },
  },
};
</script>

<style>
</style>